<template>
	<div class="satisfaction w944">
		<!-- 此页面弹窗未改 ---------------------------------------------------------------------------------->
		<div class="label_top">
			<p>满意度问卷管理</p>
			<em @click="reBack">返回</em>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="createQuestionnaire">创建直播满意度问卷</a>
				<a class="listTwo" @click="importDaoChu">导出数据</a>
				<el-select v-model="rootcompanyid" placeholder="请选择平台属性" class="th_2" v-show="identityShow">
					<el-option v-for="item in platformOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<div class="msearch">
					<input placeholder="请输入关键词…" v-model="search"/>
					<a @click="getQuestionList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" width="55">
					<template slot-scope="scope">{{scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="title" label="问卷名称"></el-table-column>
				<el-table-column prop="rootcompanyName" label="平台"></el-table-column>
				<el-table-column label="状态" width="100">
					<template slot-scope="scope">
						<el-switch class="switchStyle" v-model="scope.row.status" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="2" :inactive-value="1" @change="changeSwitch(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="createUser" label="创建者"></el-table-column>
				<el-table-column label="操作" width="140">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleSeen(scope.row)">查看</el-button>
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 30px">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleDeleteAll()" class="allDelete">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<div class="stateWrap" v-show="wrapClose">
				<a @click="stateWrapClose()">x</a>
				<p>{{stateWrapText}}</p>
			</div>
			<div class="stateWrapSecond" v-show="wrapCloseSecond">
				<a @click="stateWrapCloseSecond()">x</a>
				<p>{{stateWrapTextSecond}}</p>
			</div>
			<div class="beforeDelete" v-show="deleteStatus">
				<p>是否确认删除？</p>
				<div class="delBtn">
					<a @click="deleteSubmit">确定</a>
					<a @click="deleteCancel">取消</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				search:'',
				rootcompanyid:'',
				platformOptions:[],
				identity:'',
				identityShow:true,
				sort:'',
				tableData:[],
				multipleSelection:[],
				pagesize: 15,
				currentpage: 1,
				total: 1,
				wrapClose:false,
				stateWrapText:'',
				wrapCloseSecond: false,
				stateWrapTextSecond:'',
				nowType:'delete',
				deleteStatus:false,
			}
		},
		methods:{
			getQuestionList(){
				if(this.$root.userInfoMsg.rootcompanyid == 0){
					this.identity = this.rootcompanyid;
				}else{
					this.identity = this.$root.userInfoMsg.rootcompanyid
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/getQuestionBankPage?"+ 'page=' + this.currentpage + '&num=' + this.pagesize + '&type=1'+'&title='+this.search+'&rootcompanyid='+this.identity,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res);
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			createQuestionnaire(){
				this.$router.push({
					name: 'createQuestionnaire'
				});
			},
			handleEdit(row){
				this.$ajax({
					url: this.$root.jifuUrl + "/getQuestionBankById?" + 'id=' + row.id,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'createQuestionnaire',
								params: {
									type: 'edit'
								} 
							});
							this.$root.satisfactionMsg = res.data.data;
						}else{
							console.log("获取详细信息失败")
						}

					}
				});
			},
			handleDelete(row){
				this.deleteStatus = true;
				this.transitionRow = row;
			},
			// 批量删除
			handleDeleteAll(){
				this.nowType = 'Batch';
				if(this.multipleSelection.length==0){
					this.wrapCloseSecond = true;
					this.stateWrapTextSecond = '批量选择为空';
				}else{
					this.deleteStatus = true;
				}
			},
			deleteSubmit(){
				if(this.nowType=='delete'){
					var s={ids:this.transitionRow.id};
					this.$ajax({
						url: this.$root.jifuUrl + "/deleteQuestionBank",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.deleteStatus = false;
								this.wrapClose = true;
								this.stateWrapText = '删除成功';
								setTimeout(() =>{
									this.$router.go(0);
								},2000) 
							}else{
								this.deleteStatus = false;
								this.wrapClose = true;
								this.stateWrapText = res.data.message;	
							}	
						}
					});
				}else{
					var s={ids:this.multipleSelection.join(',')};
					this.$ajax({
						url: this.$root.jifuUrl + "/deleteQuestionBank",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.deleteStatus = false;
								this.wrapClose = true;
								this.stateWrapText = '删除成功';
								setTimeout(() =>{
									this.$router.go(0);
								},2000) 
							}else{
								this.deleteStatus = false;
								this.wrapClose = true;
								this.stateWrapText = res.data.message;	
							}	
						}
					});
				}
			},
			deleteCancel(){
				this.deleteStatus = false;
				this.nowType = 'delete';
			},
			changeSwitch(row){
				console.log(row);
				var s={id:row.id,status:row.status,rootcompanyid:row.rootcompanyid,type:1};
				this.$ajax({ 
					url: this.$root.jifuUrl + "/updateQuestionBankStatus",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if(res.data.code == 200) {
							console.log('当前用户状态为',row.status);
						}
					}
				});
			},
			handleSeen(row){
				
			},
			platformAttritude() {
                this.$ajax({
                    url: this.$root.platformUrl,
                    method: 'GET',
                    data: {},
                    success: res => {
                        if(res.data.code == 200) {
							this.platformOptions = res.data.data;
                        }
                    }
                });
            },
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
				console.log('this.multipleSelection:',this.multipleSelection);
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getQuestionList();
			},
			reBack(){
				
			},
			importDaoChu(){}
		},
		mounted(){
			this.getQuestionList();
			this.platformAttritude();
		}
	}
</script>

<style>
	.satisfaction{padding-bottom: 100px;}
	.satisfaction .el-tabs-report .listOne{width: 15%;}
	.satisfaction .el-table th:nth-child(1) .cell,.satisfaction .el-table td:nth-child(1) .cell{padding-left: 0;}
	.satisfaction .switchStyle span.el-switch__label--left{left: 6px;top: 0;}
	.satisfaction .switchStyle span.el-switch__label--right{left: -17px;top: 0;}
	.satisfaction .el-table__row td:nth-child(7) button:nth-child(2){color: #0083E2;}
	.satisfaction .el-table__row td:nth-child(7) button:nth-child(3){color: #FF2D51;}
</style>